<template>
	<view>
		<u-navbar leftIconSize="32rpx" :placeholder="true" :fixed="true" :safeAreaInsetTop="true" :autoBack="true"
			bgColor="#378EFB" :border-bottom="false">
			<view slot="left">
				<u-icon size="42" name="arrow-left" color="#fff"></u-icon>
			</view>
			<view slot="center" style="display: flex;justify-content: center;color: #fff;">
				我的收益
			</view>
			<!-- #ifdef APP-PLUS -->
			<view slot="right" style="color: #fff;"
				@click="openPage('pages/center/withdrawal', {user: JSON.stringify(user)})">
				提现
			</view>
			<!-- #endif -->
		</u-navbar>
		<view
			style="background-color: #378EFB; width: 100%;height: 284rpx;display: flex;justify-content: center;align-items: center;flex-direction: column;">
			<view style="display: flex;align-items: center;flex-direction: column;justify-content: center;">
				<text style="font-size: 24rpx; color: rgba(255,255,255,0.5);">可提现余额(元)</text>
				<text style="font-size: 52rpx;color: #fff;margin: 20rpx 0;">{{cash}}</text>
				<!-- #ifdef MP-WEIXIN -->
				<view style="color: #fff;font-size: 24rpx;"
					@click="openPage('pages/center/withdrawal', {user: JSON.stringify(user)})">
					提现
				</view>
				<!-- #endif -->
				<!-- <text @click="openPage('pages/center/withdrawal', {user: JSON.stringify(user)})" style="font-size: 24rpx;color: rgba(255,255,255,0.5);">去提现</text> -->
			</view>
		</view>
		<view
			style="background-color: #4B9AFC;width: 100%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;padding: 20rpx 0;">
			<view style="display: flex;align-items: center;flex-direction: column;justify-content: center;">
				<text style="font-size: 24rpx; color: rgba(255,255,255,0.5);">累计收益(元)</text>
				<text style="font-size: 32rpx;color: #fff;margin-top: 20rpx;">{{incomeCount.total}}</text>
			</view>
			<view style="display: flex;align-items: center;flex-direction: column;justify-content: space-around;">
				<text style="font-size: 24rpx; color: rgba(255,255,255,0.5);">今日收益(元)</text>
				<text style="font-size: 32rpx;color: #fff;margin-top: 20rpx;">{{incomeCount.today}}</text>
			</view>
		</view>
		<view @click="showCalendar()"
			style="margin: 20rpx auto; width: 670rpx; background-color: #fff; border: 2rpx solid #999;height: 64rpx;display: flex;align-items: center;justify-content: center;flex-direction: row;border-radius: 100rpx;margin-top: 40rpx;">
			<u-icon slot="icon" size="32" name="calendar" color="#999"></u-icon>
			<text style="color: #999;margin-left: 10rpx;">{{toolTip}}</text>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<view v-for="(item,index) in list" :key="index"
				style="padding: 30rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding-right: 40rpx;">
				<view style="display: flex;flex-direction: row;align-items: center;">
					<view class="icon">
						<u-image width="80rpx" height="80rpx" src="https://img.koalalf.com/icon/finance.png"></u-image>
					</view>
					<view style="display: flex;flex-direction: column;margin-left: 20rpx;">
						<text>{{item.type_text}}分润</text>
						<text style="font-size: 24rpx;color: #999;margin-top: 8rpx;">{{item.update_time}}</text>
					</view>
				</view>
				<text style="font-size: 32rpx;">{{item.income}}元</text>
			</view>
		</mescroll-body>

		<!-- <u-calendar :show="showCalendarStatus" ref="calendar" color="#378EFB"  title="选择日期"
			:showSubtitle="true" rowHeight="120" mode="range" @confirm="change" @close="showCalendarStatus=false">
		</u-calendar> -->
		<u-datetime-picker @confirm="confirmDatetimePicker" @cancel="closeDatetimePicker" visibleItemCount="10" :show="showStartDate" :minDate="calendarMinDate" :maxDate="calendarMaxDate"  v-model="startDate" mode="date"></u-datetime-picker>
		<!-- <u-datetime-picker visibleItemCount="10" :show="showEndDate" :minDate="calendarMinDate" :maxDate="calendarMaxDate"  v-model="endDate" mode="date"></u-datetime-picker> -->
	</view>
</template>

<script>
	import {
		userInfoByToken,
		incomeList
	} from '@/common/http.api.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [],
				cash: 0,
				incomeCount: {
					total: 0,
					today: 0
				},
				user: '',
				pagination: {
					current: 1,
					pageSize: 0,
					total: 0,
				},
				upOption: {
					page: {
						size: 20 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: "没有更多数据了"
				},
				downOption: {},
				showStartDate: false,
				showEndDate: false,
				calendarMaxDate: Number(new Date()),
				calendarMinDate: Number(new Date()) - 90 * 24 * 3600 * 1000,
				startDate: Number(new Date()),
				endDate: '',
				toolTip: "选择日期",
				source: '',
				background: {
					backgroundColor: '#378EFB',
				}
			}
		},
		onLoad({
			source
		}) {
			let that = this
			this.source = source

			userInfoByToken({}).then(res => {
				that.user = res
				uni.setStorageSync('user_info', JSON.stringify(res))
			})
			uni.$on('updateUserInfo', function(data) {
				userInfoByToken({}).then(res => {
					that.user = res
					uni.setStorageSync('user_info', JSON.stringify(res))
				})
			})
		},
		methods: {
			openPage(path, params = {}) {
				this.$u.route({
					url: path,
					params
				})
			},
			back() {
				this.$u.route({
					type: 'navigateBack'
				})
			},
			getData() {
				uni.showLoading({
					title: '正在查询...',
				})
				let that = this;
				let params = {
					page: that.pagination.current,
					pageSize: 20,
					source: that.source
				}
				
				if(this.toolTip != '选择日期'){
					params.start_date = uni.$u.timeFormat(that.startDate, 'yyyy-mm-dd')
					params.end_date = uni.$u.timeFormat(that.startDate + 24 * 3600 * 1000, 'yyyy-mm-dd')
				}
				
				incomeList(params).then(res => {
					uni.hideLoading()
					that.mescroll.endByPage(res.list.length, res.pagination.total)

					that.cash = res.cash
					that.incomeCount = res.incomeCount

					if (that.pagination.current == 1) {
						that.list = res.list
					} else {
						that.list = [...that.list, ...res.list]
					}

					that.pagination = res.pagination;
					that.pagination.current++
				})
			},
			upCallback() {
				this.getData()
			},
			downCallback() {
				this.pagination.current = 1;
				this.mescroll.resetUpScroll();
			},
			showCalendar() {
				this.showStartDate = true
			},
			closeDatetimePicker(){
				this.showStartDate = false
			},
			confirmDatetimePicker(e){
				console.log(e)
				
				this.startDate = e.value
				this.endDate = e.value
				
				this.toolTip = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				
				this.pagination.current = 1;
				this.getData(1)
				this.closeDatetimePicker()
			},
			change(e) {
				this.pagination.current = 1;
				this.startDate = e[0]
				this.endDate = e[e.length - 1]
				this.getData(1)
				this.toolTip = "从" + this.startDate + "到" + this.endDate
				this.showCalendarStatus = false
			}
		}
	}
</script>

<style>
	body {
		background-color: #fff;
	}

	.icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		overflow: hidden;
	}
</style>
